<template>
  <div class="dashboard-container">
    <div class="app-container">

      <el-form
        :inline="true"
        v-model="companyRuleForm"
      >

        <el-form-item label="标签名称" label-width="80px">
          <el-input
            v-model="companyRuleForm.tags"
            class="input-width"
          />
        </el-form-item>

        <el-form-item label="城市" label-width="80px">
            <el-cascader
              v-model="companyRuleForm.province"
              :options="provinces"
              class="input-width"
              @change="Getprovince"
            />

        </el-form-item>

        <el-form-item label="地区" label-width="80px">
            <el-cascader
              v-model="companyRuleForm.city"
              :options="citys"
              class="input-width"
              @change="GetCity"
            />
        </el-form-item>

        <el-form-item label="企业简称" label-width="80px">
           <el-input
            v-model="companyRuleForm.shortName"
            class="input-width"
          />
        </el-form-item>

        <el-form-item label="状态" label-width="80px">
          <el-select
            v-model="companyRuleForm.state"
            placeholder="请选择"
            class="input-width"
          >
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="btns">
          <el-button @click="clear">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>

        <el-form-item class="add">
          <el-button type="success" @click="onAddUser">
            <i class="el-icon-edit"></i>
            新增用户
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="total">
      <i class="el-icon-info"><span class="total-font">共{{ companysList.counts }}条记录</span></i>
    </div>
    <my-table
      :table-props="{
          data: companysList.items,
          headerCellStyle: getRowClass
        }"
        :columns="[
          { label: '序号', prop: 'id',  align: 'center' },
          { label: '企业编号', prop: 'number', align: 'center' },
          { label: '企业简称', prop: 'shortName',  align: 'center' },
          { label: '标签', prop: 'tags', align: 'center' },
          { label: '创建者', prop: 'creatorID',  align: 'center' },
          { label: '创建日期', prop: 'addDate', align: 'center' },
          { label: '备注', prop: 'remarks', align: 'center' },
          { label: '状态', prop: 'state',  align: 'center' },
          { label: '操作', slotName: 'operators', width: 200, align: 'center' }
        ]"
         :pagination-props="{
          pageSize: pageSize,
          pageSizes: [5, 10, 15, 20],
          background: true,
          total: companysList.counts,
          layout: '->, prev, pager, next, sizes, jumper'
        }"
        :pagination-events="events"
      >
    >
      <template v-slot:operators="scope">
        <el-button @click="editUser(scope)" type="primary" icon="el-icon-edit" circle plain></el-button>
        <el-button @click="editState(scope)" type="warning" :icon="scope.row.isFamous ? 'el-icon-check' : 'el-icon-close'" circle plain></el-button>
        <el-button @click="deleteInfo(scope)" type="danger" icon="el-icon-delete" circle plain></el-button>
      </template>
    </my-table>

    <!-- 新增用户弹窗 -->
    <el-dialog
      :title= "edit ? '编辑用户' : '创建用户'"
      :visible.sync="addUserVisible"
      width="700px"
    >
      <el-form
        :model="createUserRuleForm"
        :rules="addUserRules"
        label-width="120px"
      >
        <el-form-item label="企业名称" prop="shortName" required>
          <el-input
            v-model="createUserRuleForm.shortName"
            style="width: 76%"
          />
        </el-form-item>

        <el-form-item label="所属公司" prop="company" required>
          <el-input
            v-model="createUserRuleForm.company"
            style="width: 76%"
          />
        </el-form-item>

        <el-form-item label="  ">
          <div class="prompt-text">https://www.tianyancha.com （在此可查询所属公司全称及简称）</div>
        </el-form-item>

        <el-form-item label="城市地区" required>
            <el-cascader
              v-model="createUserRuleForm.province"
              :options="provinces"
              @change="getProvince"
              style="width: 37%; margin-right: 10px"
            />
            <el-cascader
              v-model="createUserRuleForm.city"
              :options="citys"
              @change="getCity"
              style="width: 37%"
            />
        </el-form-item>

        <el-form-item label="方向(企业标签)" prop="tags" required>
          <el-input
            v-model="createUserRuleForm.tags"
            style="width: 76%"
          />
        </el-form-item>

        <el-form-item label="备注" prop="remarks" required>
          <el-input
            type="textarea"
            v-model="createUserRuleForm.remarks"
            style="width: 76%"
          />
        </el-form-item>
      </el-form>

      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" @click="onAddUserOk">确定</el-button>
          <el-button @click="onAddUserClose">取消</el-button>
        </el-col>
      </el-row>

    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import * as cityApi from '@/api/hmmm/citys'
import { add, update, remove } from '@/api/hmmm/companys'

export default {
  name: 'CompanysList',
  data () {
    const validateNull = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t('值不能为空')))
      } else {
        callback()
      }
    }
    return {
      events: {
        'current-change': this.onCurrentPageChange,
        'size-change': this.onPageSizeChange
      },
      addUserRules: {
        shortName: [{ validator: validateNull, trigger: 'blur' }],
        company: [{ validator: validateNull, trigger: 'blur' }],
        remarks: [{ validator: validateNull, trigger: 'blur' }],
        tags: [{ validator: validateNull, trigger: 'blur' }]
      },
      companyRuleForm: {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: ''
      },
      createUserRuleForm: {
        province: '',
        city: '',
        // 企业名称
        shortName: '',
        // 方向
        tags: '',
        company: '',
        remarks: '',
        isFamous: true
      },
      provinces: [],
      citys: [],
      page: 1,
      pageSize: 5,
      addUserVisible: false,
      edit: false
    }
  },
  computed: {
    ...mapState('companys', [
      'companysList'
    ])
  },
  created () {
    this.updataCompanysList({
      page: this.page,
      pageSize: this.pageSize
    })

    this.provinces = cityApi.provinces().map(d => ({
      value: d,
      label: d
    }))
  },
  methods: {
    ...mapActions('companys', [
      'updataCompanysList'
    ]),
    Getprovince (value) {
      this.citys = cityApi.citys(value[0]).map(d => ({
        value: d,
        label: d
      }))
      this.companyRuleForm.province = value[0]
    },
    GetCity (value) {
      this.companyRuleForm.city = value[0]
    },
    getProvince (value) {
      console.log(value)
      this.citys = cityApi.citys(value[0]).map(d => ({
        value: d,
        label: d
      }))
      this.createUserRuleForm.province = value[0]
    },
    getCity (value) {
      this.createUserRuleForm.city = value[0]
    },
    // 表单清除
    clear () {
      this.companyRuleForm = {
        province: '',
        city: '',
        state: '',
        corporateAbbreviation: '',
        label: ''
      }
    },
    // 搜索
    search () {
      let f = 0
      const form = {}
      for (const key in this.companyRuleForm) {
        if (this.companyRuleForm[key] !== '') {
          f = 1
          form[key] = this.companyRuleForm[key]
        }
      }
      if (f) {
        this.updataCompanysList({
          ...form,
          page: this.page,
          pageSize: this.pageSize
        })
      } else {
        this.updataCompanysList({
          page: this.page,
          pageSize: this.pageSize
        })
      }
    },
    // 修改按钮
    editUser ({ row }) {
      this.createUserRuleForm = {
        ...row,
        isFamous: row.isFamous === 1 ? true : false
      }
      this.edit = true
      this.addUserVisible = true
    },
    // 当前页改变时
    onCurrentPageChange (currentPage) {
      this.page = currentPage
      this.updataCompanysList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    onPageSizeChange (pageSize) {
      this.page = 1
      this.pageSize = pageSize
      this.updataCompanysList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    // 新增用户弹窗
    onAddUser () {
      this.addUserVisible = true
      this.edit = false
      this.createUserRuleForm = {
        province: '',
        city: '',
        // 企业名称
        shortName: '',
        // 方向
        tags: '',
        company: '',
        remarks: '',
        isFamous: true
      }
    },
    onAddUserOk () {
      if (!this.edit) {
        add(this.createUserRuleForm)
        // 刷新页面
        this.updataCompanysList({
          page: this.page,
          pageSize: this.pageSize
        })
      } else {
        update(this.createUserRuleForm)
        this.updataCompanysList({
          page: this.page,
          pageSize: this.pageSize
        })
      }
      this.addUserVisible = false
      this.createUserRuleForm = {
        province: '',
        city: '',
        state: '',
        // 企业名称
        shortName: '',
        // 方向
        tags: '',
        company: '',
        remarks: ''
      }
    },
    onAddUserClose () {
      this.createUserRuleForm = {
        province: '',
        city: '',
        state: '',
        // 企业名称
        shortName: '',
        // 方向
        tags: '',
        company: '',
        remarks: ''
      }
      this.addUserVisible = false
    },
    getRowClass ({ rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f8f8f9; border-bottom: 2px solid #dcdcdc'
      }
    },
    // 删除
    deleteInfo ({ row }) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row)
          .then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        this.updataCompanysList({
          page: this.page,
          pageSize: this.pageSize
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改状态
    editState ({ row }) {
      this.createUserRuleForm = {
        ...row,
        isFamous: row.isFamous === 1 ? false : true
      }
      update(this.createUserRuleForm)
      this.updataCompanysList({
        page: this.page,
        pageSize: this.pageSize
      })
    }
  }
}
</script>

<style lang="sass" scoped>

  .el-pagination
    background-color: pink
  .dashboard-container
    background-color: #fff
    padding: 20px
  .app-container
    padding: 0
  .input-width
    width: 234px
  .btns
    margin-left: 40px
  .add
    float: right

  .total
    font-size: 14px
    background-color: #eee
    padding: 8px
    width: calc(100% - 8px)
    border-radius: 5px
    margin-bottom: 20px
    color: #666
    .total-font
      margin-left: 6px
  .dialog
    padding-right: 40px
  .prompt-text
    font-size: 14px
</style>
